<template>
  <view class="container">
    <!-- 文字动画区域 -->
    <view class="text-container">
      <text class="text first" :class="{ show: showFirst }">
        I have been contemplating the meaning of life
      </text>

      <text class="text second" :class="{ show: showSecond }">
        But I can't find the direction. I don't want time to erase my mark, so I
        am recording my life here
      </text>
    </view>

    <!-- 按钮区域 -->
    <view class="button-container" :class="{ show: showButton }">
      <button class="action-btn" @tap="handleAction">
        {{ isLoggedIn ? "Into the Home" : "Login Now" }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useUserStore } from "@/store/user";

const userStore = useUserStore();
const isLoggedIn = computed(() => !!userStore.token);

const showFirst = ref(false);
const showSecond = ref(false);
const showButton = ref(false);

// 动画时序控制
onMounted(() => {
  // 第一段文字
  setTimeout(() => {
    showFirst.value = true;
  }, 500);

  // 第二段文字
  setTimeout(() => {
    showSecond.value = true;
  }, 2500);

  // 按钮
  setTimeout(() => {
    showButton.value = true;
  }, 4500);
});

// 按钮点击处理
const handleAction = () => {
    uni.navigateTo({
      url: "/pages/login/index",
    });
//   if (isLoggedIn.value) {
//     uni.reLaunch({
//       url: "/pages/index/index",
//     });
//   } else {
//     uni.navigateTo({
//       url: "/pages/login/index",
//     });
//   }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;

  .text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60rpx;

    .text {
      color: rgba(255, 255, 255, 0.9);
      font-size: 32rpx;
      line-height: 1.6;
      opacity: 0;
      transform: translateY(20rpx);
      transition: all 1s ease;
      font-weight: 300;
      letter-spacing: 2rpx;

      &.show {
        opacity: 1;
        transform: translateY(0);
      }

      &.first {
        font-size: 36rpx;
      }

      &.second {
        transition-delay: 0.5s;
      }
    }
  }

  .button-container {
    opacity: 0;
    transform: translateY(20rpx);
    transition: all 0.8s ease;
    padding: 40rpx 0;

    &.show {
      opacity: 1;
      transform: translateY(0);
    }

    .action-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      height: 90rpx;
      line-height: 90rpx;
      color: #fff;
      font-size: 32rpx;
      border-radius: 45rpx;
      width: 100%;
      max-width: 600rpx;
      margin: 0 auto;

      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style> 